<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('库存平面图')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body style="height: 100%; margin: 0" onload="kpi(1,'01',1)">
<div data-options="region:'north'">
    <fieldset style="border-color: #E7F0FF">
        <form id="user-form">
            <div class="select-list">
                <table>
                    <tr>
                        <li>
                            <label>仓库：</label>
                            <select id="warehouseId" name="warehouseId" style="width: 150px" onchange="faaaa()">
                                <option value="01">CTU库</option>
                                <option value="02">四向车库</option>
                                <option value="03">标准库</option>
                                <option value="04">臂架库</option>
                            </select>
                            <!-- <label>仓库：</label>
                             <select name="warehouseId" th:with="type=${@dict.getType('is_house')}" required>
                                 &lt;!&ndash;<option value="">请选择</option>&ndash;&gt;
                                 <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                             </select>-->
                        </li>

                        <li>
                            <label>巷道：</label>
                            <select id="roadwayId" name="roadwayId" style="width: 150px" onchange="platoon()">
                            </select>
                        </li>
                        <li>
                            <label>排：</label>
                            <select id="thePlatoon" name="thePlatoon" style="width: 150px" onchange="change()">
                            </select>
                        </li>
                    </tr>
                </table>
            </div>
        </form>
    </fieldset>
</div>
<div id="container" style="height: 80%; overflow:hidden"></div>
<div id="container3" style="height: 2%; width:100%;margin-top: 5px;background-color: #ebd5aa;  overflow:hidden"></div>
<th:block th:include="include :: echarts227-js"/>
<th:block th:include="include :: jquery-cxselect-js"/>
<script th:inline="javascript">

    var msg;
    $(document).ready(function () {
        platoon();
        faaaa();
    });

    function platoon() {
        var warehouseId = $("#warehouseId").val();
        var roadwayId = $("#roadwayId").val();

        // $("#thePlatoon").find("option").remove();

        $("#thePlatoon").empty();
        if (warehouseId == "01") {
            switch (roadwayId) {
                case "1":
                    for (let i = 1; i < 3; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                case "2":
                    for (let i = 3; i < 5; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                // case "3":
                //     for (let i = 7; i < 9; i++) {
                //         $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                //     }
                //     break;
                // case "4":
                //     for (let i = 9; i < 13; i++) {
                //         $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                //     }
                //     break;
            }
            change();

        } else if (warehouseId == "02") {
            switch (roadwayId) {
                case "1":
                    for (let i = 1; i < 5; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                case "2":
                    for (let i = 5; i < 9; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                    break;
            }
            change();
        } else if (warehouseId == "03") {
            switch (roadwayId) {
                case "1":
                    for (let i = 1; i < 3; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                case "2":
                    for (let i = 3; i < 5; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                // case "3":
                //     for (let i = 5; i < 7; i++) {
                //         $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                //     }
                //     break;

            }
            change();
        } else {
            switch (roadwayId) {
                case "1":
                    for (let i = 1; i < 3; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                case "2":
                    for (let i = 3; i < 5; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
                case "3":
                    for (let i = 5; i < 7; i++) {
                        $("#thePlatoon").append("<option value=" + i + ">" + i + "排</option>");
                    }
                    break;
            }
            change();
        }

    }

    function faaaa() {
        var warehouseId = $("#warehouseId").val();
        if (warehouseId == "01") {
            $("#roadwayId").empty();
            for (let i = 1; i < 3; i++) {
                $("#roadwayId").append("<option value=" + i + ">" + i + "巷道</option>");
            }
        }
        if (warehouseId == "02") {
            $("#roadwayId").empty();
            for (let i = 1; i < 3; i++) {
                $("#roadwayId").append("<option value=" + i + ">" + i + "巷道</option>");
            }
        }
        if (warehouseId == "03") {
            $("#roadwayId").empty();
            for (let i = 1; i < 3; i++) {
                $("#roadwayId").append("<option value=" + i + ">" + i + "巷道</option>");
            }
        }
        if (warehouseId == "04") {
            $("#roadwayId").empty();
            for (let i = 1; i < 4; i++) {
                $("#roadwayId").append("<option value=" + i + ">" + i + "巷道</option>");
            }
        }
        platoon();
    }


    function change() {

        kpi($("#thePlatoon").val(), $("#warehouseId").val(), $("#roadwayId").val(),);
    }

    var x = []; //数值
    var y = []; //数值
    var str1 = [];
    var str2 = [];
    var str3 = [];
    var str4 = [];
    var str5 = [];
    var str6 = [];

    function kpi(thePlatoon, warehouseId, roadwayId) {


        $.ajax({
            url: "/kpi/plan?warehouseId=" + warehouseId + "&thePlatoon=" + thePlatoon + "&roadwayId=" + roadwayId,
            dataType: "json",
            async: false,
            cache: false,
            // data:eval("(" + jz + ")"),//{'product_id':'${bbb.product_id}'}
            type: "post",
            success: function (ajaxr) {
                var uu = ajaxr;
                x = eval('(' + uu["column"] + ')');
                y = eval('(' + uu["floor"] + ')');
                str1 = eval('(' + uu["empty"] + ')');
                str2 = eval('(' + uu["full"] + ')');
                str3 = eval('(' + uu["inAllot"] + ')');
                str4 = eval('(' + uu["outAllot"] + ')');
                str5 = eval('(' + uu["inCheck"] + ')');
                str6 = eval('(' + uu["outCheck"] + ')');
            }
        });

        var msg;
        var dom = document.getElementById("container"); //获取元素
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '库位平面图'; //表头
        option = {

            tooltip: {
                show: true,
                trigger: 'item',
                formatter: function (params) {
                    var asd;

                    $.post("/kpi/msg?thePlatoon=" + thePlatoon + "&theColumn=" + (params.data[0] + 1) + "&theFloor=" + (params.data[1] + 1), function (date) {
                        msg = date;
                        console.log(date)
                    })
                    if (params.seriesName == "异常") {
                        var str = "空位" + msg;
                    } else {
                        var str = params.seriesName + "<br>" + thePlatoon + "排" + (params.data[0] + 1) + "列" + (params.data[1] + 1) + "层<br>" + msg;
                    }
                    return str
                },
            },
            title: {
                text: '库位分布平面图',
                subtext: thePlatoon + '排'
            },
            grid: {
                width: "90%",
                x: "5%",
                height: '70%',
                y: "20%",
            },
            xAxis: {
                type: 'category',
                data: x,
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: y,
                splitArea: {
                    show: true
                }
            },
            emphasis: {
                itemStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10
                },
            },
            itemStyle: {
                borderColor: "white	",
                borderWidth: "2",
            },
            legend: {
                data: ["空位", "满位", "入库分配", "出库分配", "入库需盘点", "出库需盘点", "状态异常", "货物异常"],
            },

            series: [{
                name: '空位',
                type: 'heatmap',
                data: str1,
                color: "#AEEEEE"

            },
                {
                    name: '满位',
                    type: 'heatmap',
                    data: str2,
                    color: "#FF9900"

                },
                {
                    name: '入库分配',
                    type: 'heatmap',
                    data: str3,
                    color: "#FFFF00"
                },
                {
                    name: '出库分配',
                    type: 'heatmap',
                    data: str4,
                    color: "#00CC00"
                },
                {
                    name: '入库需盘点',
                    type: 'heatmap',
                    data: str5,
                    color: "#FF0000"
                },
                {
                    name: '出库需盘点',
                    type: 'heatmap',
                    data: str6,
                    color: "#0000FF"
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

</script>
</body>
</html>
